<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>4.21作业</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            /*          height: 500px;*/
            background: pink;
            display: none;
        }

        span {
            display: inline-block;
            width: 80px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background: skyblue;
            list-style: none;
            border: 1px solid #000;
        }

        ul {
            display: inline-block;
        }

        ul li {
            display: inline-block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: skyblue;
            list-style: none;
            border: 1px solid #000;
        }

        .active {
            display: block;
        }

        .select {
            background: blue;
        }
    </style>
</head>

<body>
    <div class="active"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <span class="previous">上一页</span>
    <ul>
        <li class="select">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <span class="next">下一页</span>

    <script type="text/javascript">
        // 获取元素
        let previous = document.querySelector('.previous')
        let next = document.querySelector('.next')
        let lis = document.querySelectorAll('li')
        let divs = document.querySelectorAll('div')
        console.log(divs)

        function list(a) {
            // 1.创建ajax
            let xhr = new XMLHttpRequest()
            // 2.和服务器建立连接(admin是请求路径)
            xhr.open("get", `http://wish.byesame.com/admin?page=${a}&rows=20`)
            // 3.发送数据
            xhr.setRequestHeader('token', localStorage.getItem('token'))
            xhr.send()
            // 4.接收数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let res = JSON.parse(xhr.responseText)
                    console.log(res)
                    // 渲染数据
                    for (let i = 0; i < 5; i++) {
                        let pageContent = ''
                        for (let j = 0; j < res.data.list.length; j++) {
                            pageContent += `<p>${res.data.list[j].name}${res.data.list[j].userName}${res.data.list[j].role}${res.data.list[j].lastLoginAt}${res.data.list[j].id}</p >`
                        }
                        divs[i].innerHTML = pageContent
                    }
                }
            }
        }
        list()
        // 点击事件
        // 1.点击lis类名设置  
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                list(i + 1)
                document.querySelector('.active').className = ""
                divs[i].className = "active"
                document.querySelector('.select').className = ""
                this.className = "select"
            }
        }
        // 上一页点击事件
        previous.onclick = function () {
            let select = document.querySelector('.select')
            if (select.previousElementSibling == null) {
                lis[4].onclick()
            } else {
                select.previousElementSibling.onclick()
            }
        }
        // 下一页点击事件
        next.onclick = function () {
            let select = document.querySelector('.select')
            if (select.nextElementSibling == null) {
                lis[0].onclick()
            } else {
                select.nextElementSibling.onclick()
            }
        }


    </script>
</body>

</html>